<template>
 <div>
  <el-upload
    ref="fileUploadForm"
    action=""
    :multiple="false"
    :auto-upload="false"
    :show-file-list="false"
    :file-list="fileList"
    :before-upload="handleBeforeUpload"
    :http-request="handleFileUploadSubmit"
    :on-change="handleFileListChanged"
  >
    <el-row>
      <el-col style="display: flex; text-align: center; width: 400px">
        <el-input :value="currentFileName" placeholder="请选择文件" readonly />
        <el-button type="info" round style="margin-left: 20px" size="middle">选择文件</el-button>
      </el-col>
    </el-row>
  </el-upload>

  <el-row style="margin-top: 30px; margin-bottom: 30px">
    <el-col style="text-align: center">
      <el-button round @click="clearFileList">清空</el-button>
      <el-button type="success" round style="margin-left: 20px" @click="submitFile">上传</el-button>
      <el-button type="success" round style="margin-left: 20px" @click="downloadTemplate">下载模板</el-button>
    </el-col>
  </el-row>

<!--  <el-progress-->
<!--    type="circle"-->
<!--    :color="progressColor"-->
<!--    :width="150"-->
<!--    :stroke-width="15"-->
<!--    :percentage="uploadPercentage"-->
<!--    :format="formatUploadPercentage"-->
<!--  />-->
 </div>
</template>
<script>
    export default {
        name: "UploadTest",
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
          // 当前已选择的文件的文件名
          currentFileName: '',
          // 待上传的文件列表
          fileList: [],
          // 上传进度(百分比，0-100)
          uploadPercentage: 0,
          // 进度条的颜色
          progressColor: 'rgb(0, 0, 255)'
        };
      },
      methods:{
        //导出Excel
        exportExcel() {
          require.ensure([], () => {
            const { export_json_to_excel } = require('../../excel/Export2Excel');
            //设置Excel表格第一行的标题
            const tHeader = ['日期', '姓名', '地址'];
            //设置标题对应的字段
            let filterVal = ['date', 'name', 'address'];
            //把后台传过来的数据存到list
            const list = this.tableData;
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, '下载Excel测试');
          })
        },
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => v[j]))
        },
        /**
         * 文件状态改变时的操作
         * @param {Object} selectedFile 选择的文件对象
         * */
        handleFileListChanged(selectedFile) {
          // TODO 选择了文件时可以做一些文件类型的校验之类的操作
          // 文件列表修改为选择的文件
          this.fileList = [selectedFile];
          // 提示框展示为选择的文件的文件名
          this.currentFileName = selectedFile.name;
        },

        /**
         * 清空待上传的文件列表
         * */
        clearFileList() {
          // 待上传的文件列表清空
          this.fileList = [];
          // 提示框展示的文件名清空
          this.currentFileName = '';
        },

        /**
         * 点击【上传】按钮时要进行的操作
         * */
        submitFile() {
          // TODO 还可以进行文件校验等操作
          if (this.fileList.length < 1) {
            this.$alert('请选择文件后再上传！', '提示', {
              type: 'warning'
            });
            return;
          }
          // 校验无误将要上传，这里会调用 http-request 所绑定的方法
          this.$refs.fileUploadForm.submit();
        },
        // 上传前校验
        handleBeforeUpload(file) {
          let extension = file.name.split(".")[1];
          let extensionList = ["xls", "xlsx"];
          if (extensionList.indexOf(extension) < 0) {
            this.$message.warning("只能上传Excel文件");
            return false;
          }
        },
        // 下载上传模板
        downloadTemplate(){
          this.$http({ // 用axios发送post请求
            method: 'post',
            url: '/downloadTemplate', // 请求地址
            responseType: 'blob' // 表明返回服务器返回的数据类型
          })
            .then((resp) => { // 处理返回的文件流
              if (!resp) {
                return
              }
              let url = window.URL.createObjectURL(new Blob([resp.data])) // 这里一定要使用resp.data的内容，否则excel中的内容为: [object][object], 而非实际的模板内容
              let link = document.createElement('a')
              link.style.display = 'none'
              link.href = url
              link.setAttribute('download', 'excel.xls')

              document.body.appendChild(link)
              link.click()
            })
        },
        /**
         * 发送文件上传的网络请求
         * */
        handleFileUploadSubmit( {file} ) {
          // 将进度条的颜色重置为蓝色
          this.progressColor = 'rgb(0, 0, 255)';
          // 创建一个表单，用于存放请求数据(主要是文件)
          const fileFormData = new FormData();
          // 在表单中添加要发送给接口的数据
          fileFormData.append('username', 'Alice');
          fileFormData.append('excelFile', file);
          // 使用 axios 发送文件上传请求，并监听文件上传进度
          this.$http.post('/upload', fileFormData, {
            onUploadProgress: progressEvent => {
              if (progressEvent.lengthComputable) {
                const percentage = progressEvent.loaded / progressEvent.total;
                // 此处的"percentage"达到1时，并不意味着已经得到了接口的响应结果，因此只有当得到响应时才将进度置百
                if (percentage < 1) {
                  this.uploadPercentage = percentage * 100;
                }
              }
            }
          }).then((res) => {
            if (res.data.status){
              this.$message({
                message: "恭喜你" + res.data.message,
                type: 'success'
              });
            }else {
              console.log(res.data.message);
              this.$alert('上传失败！'+res.data.message, '提示', {type: 'error'});
            }
            // if (respObj.status !== 0) {
            //   // 文件上传失败，将进度条置为红色
            //   this.progressColor = 'rgb(255, 0, 0)';
            //   this.$alert('上传失败！', '提示', {type: 'error'});
            //   console.error(respObj.message);
            //   return;
            // }
            // // 已成功得到接口的响应结果，将进度条的颜色置为绿色，并将进度置为100%
            // this.progressColor = 'rgb(0, 255, 0)';
            // this.uploadPercentage = 100;
            // this.$alert('上传成功！', '提示', {type: 'success'});
            // console.log('文件信息: ', respObj.file);
          }).catch(error => {
            // 请求失败，将进度条置为红色
            this.progressColor = 'rgb(255, 0, 0)';
            this.$alert('上传失败！', '提示', {type: 'error'});
            console.error(error);
          });
        },

        /**
         * 进度条内容格式化
         * @param {number} percentage 进度
         * */
        formatUploadPercentage(percentage) {
          // 进度百分比保留两位小数展示，达到100%时展示"上传成功"
          return percentage === 100 ? '上传完成' : `${percentage.toFixed(2)}%`;
      }
    }

    }
</script>

<style scoped>

</style>
